<!DOCTYPE html>

<html>
	<head>
		<title>Vertices and Properties</title>
		<script type="text/javascript" src="../libs/three.js"></script>
		<script type="text/javascript" src="../libs/jquery-1.9.0.js"></script>
		<script type="text/javascript" src="../libs/stats.js"></script>
		<script type="text/javascript" src="../libs/dat.gui.js"></script>
		<style >
			body{
				/* set margin to 0 and overflow to hidden, to use the complete page */

				margin: 0;
				overflow: hidden;
			}
		</style>
	</head>
	<body>

		<!-- Div which will hold the Output -->
		<div id="WebGL-output">
		</div>

		<!-- Div which will show the stats -->
		<div id="Stats-output">
		</div>

		<!-- Javascript code that runs our Three.js examples -->
		<script type="text/javascript">
			//once everything is loaded, we run our Three.js stuff.
			$(function () { 
 				var stats = initStats();
 				
 				//here we'll put the Three.js stuff
 				var scene = new THREE.Scene();

 				//add camera and renderer
 				var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
 				var renderer = new THREE.WebGLRenderer();
 				renderer.setClearColor(0xEEEEEE, 1.0);
 				renderer.setSize(window.innerWidth, window.innerHeight);
 				renderer.shadowMapEnabled = true;

 				//add axis
 				var axes = new THREE.AxisHelper(20);
 				scene.add(axes);

 				//add Light
 				var ambientLight = new THREE.AmbientLight(0x0c0c0c);
 				scene.add(ambientLight);

 				var spotLight = new THREE.SpotLight(0xffffff);
 				spotLight.castShadow = true;
 				spotLight.position.set(-40, 60, -10);
 				scene.add(spotLight);

 				//add plane
 				var planeGeo = new THREE.PlaneGeometry(60, 40, 1, 1);
 				var planeMtr = new THREE.MeshLambertMaterial({color: 0xffffff});
 				var plane = new THREE.Mesh(planeGeo, planeMtr);
 				plane.rotation.x = -0.5 * Math.PI;
		        plane.position.x = 0;
		        plane.position.y = 0;
		        plane.position.z = 0;
		        plane.receiveShadow = true;
		        scene.add(plane);


		        camera.position.x = -30;
		        camera.position.y = 40;
		        camera.position.z = 30;
		        camera.lookAt(scene.position);
		        document.getElementById("WebGL-output").appendChild(renderer.domElement);

		        //define geometry
		        var vertices = [
			        new THREE.Vector3(10, 15, 10),
		        	new THREE.Vector3(-15, 5, 5),
		        	new THREE.Vector3(15, 5, 5),
		        	new THREE.Vector3(-15, 5, -5),
		        	new THREE.Vector3(15, 5, -5),
		        	new THREE.Vector3(10, 15, -10)
		        ];

		        var faces = [
		        	new THREE.Face3(1, 2, 3),
		        	new THREE.Face3(2, 4, 3),
		        	new THREE.Face3(0, 1, 5),
		        	new THREE.Face3(3, 5, 1),
		        	new THREE.Face3(2, 0, 4),
		        	new THREE.Face3(0, 5, 4),
		        	new THREE.Face3(3, 4, 5),
					new THREE.Face3(0, 1, 2)		        	
		        ]

		        var geom = new THREE.Geometry();
		        geom.vertices = vertices;
		        geom.faces = faces;
		        geom.computeFaceNormals();
		        
		        var materials = [
		            new THREE.MeshLambertMaterial({opacity: 0.5, color: 0x44ff44, transparent: true, side:THREE.DoubleSide}),
		            new THREE.MeshBasicMaterial({color: 0x000000, wireframe: true})

		        ];


		        var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, materials);
		        mesh.children.forEach(function (e) {
		            e.castShadow = true;
		        });

		        scene.add(mesh);

		        function addControl(x, y, z){
		        	var controls = new function () {
		                this.x = x;
		                this.y = y;
		                this.z = z;
		            };

		            return controls;
		        }

		        var controlPoints = [];
		       	controlPoints.push(addControl(10, 15, 10));
		       	controlPoints.push(addControl(-15, 5, 5));
		       	controlPoints.push(addControl(15, 5, 5));
		       	controlPoints.push(addControl(-15, 5, -15));
		       	controlPoints.push(addControl(15, 5, -5));
		       	controlPoints.push(addControl(10, 15, -10));

		       	//properties
		       	var controls = new function() {
		       		this.scaleX = 1;
		            this.scaleY = 1;
		            this.scaleZ = 1;

		            this.positionX = 0;
		            this.positionY = 0;
		            this.positionZ = 0;

		            this.rotationX = 0;
		            this.rotationY = 0;
		            this.rotationZ = 0;
		            this.scale = 1;

		            this.translateX = 0;
		            this.translateY = 0;
		            this.translateZ = 0;

		            this.visible = true;

		            this.translate = function () {

		                mesh.translateX(controls.translateX);
		                mesh.translateY(controls.translateY);
		                mesh.translateZ(controls.translateZ);

		                controls.positionX = mesh.position.x;
		                controls.positionY = mesh.position.y;
		                controls.positionZ = mesh.position.z;
		            }
		       	};

		       	var gui = new dat.GUI();
		       	f = gui.addFolder("Vertices");
		       	for(var i = 0; i < 6; i++){
		       		f1 = f.addFolder("Vertices " + (i + 1));
		            f1.add(controlPoints[i], 'x', -20, 20);
		            f1.add(controlPoints[i], 'y', -20, 20);
		            f1.add(controlPoints[i], 'z', -20, 20);
		       	}

		       	var fscale = gui.addFolder("Scale");
		       	fscale.add(controls, 'scaleX', 0, 5);
		       	fscale.add(controls, 'scaleY', 0, 5);
		       	fscale.add(controls, 'scaleZ', 0, 5);

		       	var fposition = gui.addFolder("Position");
		       	fposition.add(controls, 'positionX', -10, 10);
		       	fposition.add(controls, 'positionY', -10, 10);
		       	fposition.add(controls, 'positionZ', -10, 10);

		       	var frotation = gui.addFolder("Rotation");
		       	frotation.add(controls, 'rotationX', -2 * Math.PI, 2 * Math.PI);
		       	frotation.add(controls, 'rotationY', -2 * Math.PI, 2 * Math.PI);
				frotation.add(controls, 'rotationZ', -2 * Math.PI, 2 * Math.PI);

				var ftranslate = gui.addFolder("Translate");
				ftranslate.add(controls, 'translateX', -10, 10);
				ftranslate.add(controls, 'translateY', -10, 10);
				ftranslate.add(controls, 'translateZ', -10, 10);
				ftranslate.add(controls, 'translate');

				gui.add(controls, 'visible');

 				//add animation
 				render();
 				function render(){
 					stats.update();

 					var vertices = [];
		            for (var i = 0; i < 6; i++) {
		                vertices.push(new THREE.Vector3(controlPoints[i].x, controlPoints[i].y, controlPoints[i].z));
		            }

 					mesh.children.forEach(function (e) {
		                e.geometry.vertices = vertices;
		                e.geometry.verticesNeedUpdate = true;
		                e.geometry.computeFaceNormals();
		            });

		            mesh.visible = controls.visible;

		            mesh.position.x = controls.positionX;
		            mesh.position.y = controls.positionY;
		            mesh.position.z = controls.positionZ;

		            mesh.rotation.x = controls.rotationX;
		            mesh.rotation.y = controls.rotationY;
		            mesh.rotation.z = controls.rotationZ;

		            mesh.scale.set(controls.scaleX, controls.scaleY, controls.scaleZ);

 					requestAnimationFrame(render);
 					renderer.render(scene, camera);
 				};

			});

			function initStats(){
				var stats = new Stats();
				stats.setMode(0);
				stats.domElement.style.position = 'absolute';
				stats.domElement.style.lefe = '0px';
				stats.domElement.style.top = '0px';
				$("#Stats-output").append(stats.domElement);
				return stats;
			}

		</script>

	</body>
</html>